<template>
  <!-- 综合考评 -->
  <div class="app-container"> 
    <!-- 专班考评规则 -->
    <template v-if="rulesTypeFlag == 1">
      <AssessRule
        @backFn="backFn"
        :ruleDetailId="ruleDetailId"
      />
    </template>
    <!-- 乡镇考评规则 -->
    <template v-else-if="rulesTypeFlag == 2">
      <AssessTownShip
        @backFn="rulesTypeFlag = ''"
      />
    </template>
    <!-- 区考评规则 -->
    <template v-else-if="rulesTypeFlag == 3">
      <AssessRegion
        @backFn="rulesTypeFlag = ''"
      />
    </template>

    <!-- 考评首页 -->
    <div class="mainbox" v-else>
      <!-- 顶部操作 -->
      <div class="filter-container">
        <el-form ref="filterFormRef" :inline="true" :model="filterForm">
          <el-form-item label="考核周期:" prop="assessmentCycle">
            <el-select v-model="filterForm.assessmentCycle" placeholder="请选择考核周期" :clearable="true">
              <el-option
                v-for="dict in dictOptions.assessCycle"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="考核时间:" prop="times">
            <el-date-picker
              v-model="filterForm.times"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              align="right">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="状态:" prop="status">
            <el-select v-model="filterForm.status" placeholder="请选择状态" :clearable="true">
              <el-option
                v-for="dict in dictOptions.assessStatus"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="考核类型:" prop="type">
            <el-select v-model="filterForm.type" placeholder="请选择考核类型" :clearable="true">
              <el-option
                v-for="dict in dictOptions.assessType"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="$_handleFilter">查询</el-button>
          <el-button @click="$_handleReset">重置</el-button>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="table-container table-fullscreen">
        <div class="table-opt-container">
          <el-button
            icon="el-icon-s-tools"
            type="primary"
            @click="handleRuleBtn()"
          >
            考评规则设置
          </el-button>
          <el-button
            icon="el-icon-alarm-clock"
            type="primary"
            @click="handleTimeBtn()"
          >
            考评时间设置
          </el-button>
          <div class="flex-1" />
          <dt-dialog-column :columns="columns" @queryTable="getList" />
        </div>
        <el-table
          ref="table"
          v-loading="MX_listLoading"
          :data="MX_list"
          border
          highlight-current-row
          :row-key="$_getRowKey"
          style="width: 100%;text-align:center"
          :header-cell-style="MX_headerCellStyle"
        >
          <template slot="empty">
            <p>{{ $store.getters.dataText }}</p>
          </template>
          <el-table-column
            fixed="left"
            type="index"
            label="序号"
            width="70"
            align="center"
            :index="$_tableIndex"
          />
          <el-table-column
            v-for="item in columns"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :min-width="item.minWidth"
            :formatter="item.formatter"
            align="center"
          />
          <el-table-column
            :key="Math.random()"
            fixed="right"
            label="规则镜像"
            width="180px"
            align="center"
          >
            <template slot-scope="scope">
              <el-link type="primary" @click="goDetailRule(scope.row)">查看</el-link>
            </template>
          </el-table-column>
          <el-table-column
            :key="Math.random()"
            fixed="right"
            label="操作"
            width="180px"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                class="tBtn"
                @click="goDetail(scope.row)"
              >结果</el-button>
              <el-button
                size="mini"
                type="danger"
                class="tBtn"
                @click="handleDelete(scope.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <dt-pagination
          v-show="MX_total > 0"
          :total="MX_total"
          :page.sync="MX_pageNav.pageNo"
          :limit.sync="MX_pageNav.pageSize"
          @pagination="getList"
        />
      </div>
    </div>

    <!-- 专班考评规则弹框 -->
    <dtDialog
      title="考评规则设置"
      class="get-page-form-import-dialog"
      :visible.sync="assessRulesDialog"
      footerSlot
      width="620px"
    >
      <el-form ref="rulesFormRef" :model="rulesForm">
        <el-form-item label="考评类型:" prop="type">
          <el-select v-model="rulesForm.type" placeholder="请选择考评类型" :clearable="true">
            <el-option
              v-for="dict in dictOptions.assessType"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeRulesFn">取 消</el-button>
        <el-button @click="comfirmRulesFn" type="primary">确 定</el-button>
      </span>
    </dtDialog>

    <!-- 考评时间弹框 -->
    <dtDialog
      title="考评时间设置"
      class="get-page-form-import-dialog time-dialog-width"
      :visible.sync="assessTimeDialog"
      footerSlot
      width="620px"
      @closeDialog="closeTimeFn"
    >
      <el-form ref="timeFormRef" 
        :hide-required-asterisk="true"
        :model="timeForm" 
        :rules="timeRules">
        <el-form-item label="月度:" prop="monthDay">
          <!-- <el-input
            v-model.trim="timeForm.monthDay"
            class="filter-item limit"
            style="width: 200px;margin-right:10px"
            oninput="value=value.replace(/^(0+)|[^\d]+/g,'') > 31 ? 31 : value.replace(/^(0+)|[^\d]+/g,'')"
            clearable
            placeholder="请输入每月的日期"
          /> -->
          第
          <el-select v-model="timeForm.monthDay" clearable placeholder="请选择">
            <el-option
              v-for="item in 31"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
          日

        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="季度:" prop="quarterMonth">
              <!-- <el-input
                v-model.trim="timeForm.quarterMonth"
                class="filter-item limit"
                style="width: 200px;margin-right:10px"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'') > 3 ? 3 : value.replace(/^(0+)|[^\d]+/g,'')"
                clearable
                placeholder="请输入每季度的第几月"
              /> -->
              第
              <el-select v-model="timeForm.quarterMonth" clearable placeholder="请选择">
                <el-option
                  v-for="item in 12"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
              月
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label=" " prop="quarterMonthDay">
              <!-- <el-input
                v-model.trim="timeForm.quarterMonthDay"
                class="filter-item limit"
                style="width: 200px;margin-right:10px"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'') > 31 ? 31 : value.replace(/^(0+)|[^\d]+/g,'')"
                clearable
                placeholder="请输入季度的第几月日期"
              /> -->
              第
              <el-select v-model="timeForm.quarterMonthDay" clearable placeholder="请选择">
                <el-option
                  v-for="item in 31"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
              日
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="年度:" prop="yearIsMonth">
              <!-- <el-input
                v-model.trim="timeForm.yearIsMonth"
                class="filter-item limit"
                style="width: 200px;margin-right:10px"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'') > 12 ? 12 : value.replace(/^(0+)|[^\d]+/g,'')"
                clearable
                placeholder="请输入年的第几月"
              /> -->
              第
              <el-select v-model="timeForm.yearIsMonth" clearable placeholder="请选择">
                <el-option
                  v-for="item in 12"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
              月
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label=" " prop="yearMonthDay">
              <!-- <el-input
                v-model.trim="timeForm.yearMonthDay"
                class="filter-item limit"
                style="width: 200px;margin-right:10px"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'') > 31 ? 31 : value.replace(/^(0+)|[^\d]+/g,'')"
                clearable
                placeholder="请输入年的第几月日期"
              /> -->
              第
              <el-select v-model="timeForm.yearMonthDay" clearable placeholder="请选择">
                <el-option
                  v-for="item in 31"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
              日
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeTimeFn">取 消</el-button>
        <el-button @click="comfirmTimeFn" type="primary">确 定</el-button>
      </span>
    </dtDialog>

    <!-- 考核结果弹框 -->
    <dtDialog
      title="考核结果"
      class="get-page-form-import-dialog"
      :visible.sync="assessResultDialog"
      footerSlot
      width="920px"
    >
      <AssessResult
        :key="assessmentId"
        :assessmentId="assessmentId"
        :assessmentCycle="assessmentCycle"
        :assessmentTime="assessmentTime"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeResultFn">取 消</el-button>
        <el-button @click="comfirmResultFn" type="primary">确 定</el-button>
      </span>
    </dtDialog>
  </div>
</template>
<script>
import assessApi from '@/api/investment/assess'
import DialogForm from '@/views/investment/components/DialogForm'
import commonList from "@/utils/mixins/investment/commonList"
import dictMixin from '@/utils/mixins/dict'
import AssessRule from '@/views/investment/components/assessRule.vue'
import AssessTownShip from '@/views/investment/components/assessTownShip.vue'
import AssessRegion from '@/views/investment/components/assessRegion.vue'
import AssessResult from '@/views/investment/components/assessResult.vue'

export default {
  name: 'compositeAssessment',
  components: {
    DialogForm,
    AssessRule,
    AssessTownShip,
    AssessRegion,
    AssessResult
  },
  mixins: [commonList, dictMixin(['assessStatus@Local', 'assessType@Local', 'assessCycle@Local'])],
  data() {
    return {
      filterForm: {
        type: '',
        assessmentCycle: '',
        status: '',
        times:''
      },
      assessRulesDialog: false,
      rulesForm: {
        type: ''
      },
      rulesTypeFlag: '',
      assessmentId: '',
      assessmentCycle: '',
      assessmentTime: '',
      assessResultDialog: false,
      assessTimeDialog: false,
      timeForm: {
        monthDay: '',
        quarterMonth: '',
        quarterMonthDay: '',
        yearIsMonth: '',
        yearMonthDay: ''
      },
      isTimeEdit: false,
      timeRules: {
        monthDay: [{ required: true, message: " ", trigger: "blur" }],
        quarterMonth: [{ required: true, message: " ", trigger: "blur" }],
        quarterMonthDay: [{ required: true, message: " ", trigger: "blur" }],
        yearIsMonth: [{ required: true, message: " ", trigger: "blur" }],
        yearMonthDay: [{ required: true, message: " ", trigger: "blur" }],
      },
      // 列信息
      columns: [
        { prop: 'type', label: `考核类型`, minWidth: '100px', formatter: function(row) {
            let tText = ''
            switch (row.type){
              case 1:
                tText = '专班'
                break
              case 2:
                tText = '乡镇'
                break
              case 3:
                tText = '区直部门'
                break
            }
            return tText
          } 
        },
        { prop: 'assessmentCycle', label: `考核周期`, minWidth: '100px', formatter: function(row) {
            let tText = ''
            switch (row.assessmentCycle){
              case 1:
                tText = '月'
                break
              case 2:
                tText = '季度'
                break
              case 3:
                tText = '年'
                break
            }
            return tText
          } },
        { prop: 'assessmentTime', label: `考核时间`, minWidth: '100px' },
        { prop: 'status', label: `状态`, minWidth: '100px', formatter: function(row) {
            let tText = ''
            switch (row.status){
              case 1:
                tText = '未开始'
                break
              case 2:
                tText = '计算中'
                break
              case 3:
                tText = '计算完成'
                break
            }
            return tText
          } },
        // { prop: 'recommendedUnit', label: `规则镜像`, minWidth: '100px' }
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      ruleDetailId: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取页面列表
    getList() {
      this.$_getList(assessApi.getAssessmentRecords,{
        ...this.filterForm,
        ...this.MX_pageNav,
        start: this.filterForm.times[0],
        end: this.filterForm.times[1],
      })
    },
    // 考评规则
    handleRuleBtn() {
      this.assessRulesDialog = true
    },
    comfirmRulesFn() {
      if(!this.rulesForm.type) {
        this.$message({
          message: '请选择考评规则类型',
          type: 'warning'
        })

        return
      }

      this.rulesTypeFlag = this.rulesForm.type
      this.$refs.rulesFormRef.resetFields()
      this.assessRulesDialog = false
    },
    closeRulesFn() {
      this.rulesForm.type = ''
      this.assessRulesDialog = false
    },
    closeResultFn() {
      this.assessResultDialog = false
    },
    comfirmResultFn() {
      this.assessResultDialog = false
    },
    goDetail(item) {
      this.assessmentId = item.id
      let tText = ''
      switch (item.assessmentCycle){
        case 1:
          tText = '月'
          break
        case 2:
          tText = '季度'
          break
        case 3:
          tText = '年'
          break
      }
      this.assessmentCycle = tText
      this.assessmentTime = item.assessmentTime
      this.assessResultDialog = true
    },
    handleDelete(id) {
      this.$_handleDelete(assessApi.delAssessmentRecords, id, 'id')
    },
    async handleTimeBtn() {
      this.assessTimeDialog = true

      const {data} = await assessApi.getOneGroupScoringRulesDay()
      if(data.monthDay) {
        this.timeForm = data
        this.isTimeEdit = true
      }
    },
    closeTimeFn() {
      this.$refs.timeFormRef.resetFields()
      this.assessTimeDialog = false
    },
    async comfirmTimeFn() {
      this.$refs.timeFormRef.validate(async (valid) => {
        if (valid) {
          if(this.isTimeEdit) {
            const {data} = await assessApi.updataGroupScoringRulesDay(this.timeForm)

            this.assessTimeDialog = false
          } else {
            const {data} = await assessApi.saveGroupScoringRulesDay(this.timeForm)

            this.assessTimeDialog = false
          }   
          this.$refs.timeFormRef.resetFields()
          this.$message({
            message: "设置考评时间成功",
            type: "success",
          })
        } else {
          this.$message({
            message: "请填写完整表单信息",
            type: "warning",
          })
        }
      })
    },
    goDetailRule(item) {
      this.rulesTypeFlag = item.type
      this.ruleDetailId = item.id
    },
    backFn() {
      this.rulesTypeFlag = ''
      this.ruleDetailId = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.tBtn{
  margin-top: 3px;
  margin-bottom: 3px;
}
</style>
<style lang="scss">
.time-dialog-width {
  .el-select {
    width: 10.938vw!important;
  }
}
</style>
